<template>
  <div class="login-container">
    <div class="login-left">
      <img src="../assets/login.jpg" alt="Login Image" class="login-img">
    </div>
    <div class="login-right">
      <div class="login-form">
        <el-card class="login-card">
          <template #header>
            <h3 class="login-title">Login</h3>
          </template>
          <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
            <el-form-item prop="username">
              <el-input v-model="loginForm.host" placeholder="Host">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model.number="loginForm.port" type="port" placeholder="Port">
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleLogin" style="width: 100%">
                Login
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {login} from "../api/index.js";

const store = useStore()
const router = useRouter()
const route = useRoute()

const loginFormRef = ref(null)
const loading = ref(false)

const loginForm = reactive({
  host: '',
  port: null
})

const rules = {
  host: [{ required: true, message: 'Please enter host', trigger: 'blur' }],
  port: [{ required: true, message: 'Please enter port', trigger: 'blur' }]
}

const handleLogin = () => {
  loginFormRef.value.validate(async valid => {
    if (valid) {
      loading.value = true
      login(loginForm).then(res => {
        loading.value = false
        if (res.success) {
          // 登录成功
          ElMessage.success('Login successful')
          // 存储用户信息到 store
          store.commit('user/SET_TOKEN', res.sessionToken)
          router.push(route.query.redirect || '/')
        } else {
          // 登录失败
          ElMessage.error(res.message)
        }
      })
    }
  })
}
</script>

<style scoped>
.login-container {
  width: 80vw;
  height: 80vh;
  display: flex;
  margin: 0;
  padding: 0;
}

.login-left {
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.login-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-right {
  width: 50%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 400px;
  padding: 0 20px;
}

.login-card {
  width: 100%;
  border: none;
  box-shadow: none;
}

.login-title {
  margin: 0;
  text-align: center;
  font-size: 24px;
  color: #303133;
}

:deep(.el-card__header) {
  padding: 0 0 20px 0;
  border-bottom: none;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409eff inset;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .login-left {
    display: none;
  }

  .login-right {
    width: 100%;
  }

  .login-form {
    width: 90%;
    max-width: 400px;
  }
}
</style>
